<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jq/jquery.3.3.1.min.js"></script>
</head>
<style>
    table{
        border-collapse: separate;
        border-spacing: 0;
        border-top: 1px solid lightgray;
        border-left: 1px solid lightgray;
    }
    td{
        border: 1px solid lightgray;
        border-top: none;
        border-left: none;
    }
    .title3:hover{
        color: #ff9979;
    }
</style>
<script type="text/javascript">
    //校验Name
    function checkUsername(str) {
        var username=/^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_]){1,10}$/ /*/^[\u4E00-\u9FA5]{2,5}$/*/;//[\u4E00-\u9FA5] 判断是不是1到10位中文英文数字下划线字符
        return username.test(str);//使用test方法，符合Name的规范就的到true，反之的到false
    }
    //校验密码
    function checkPassword(str) {
        var password=/^[a-zA-Z0-9]{6,20}$/;//6到20位字母或数字
        return password.test(str);
    }
    //校验nickname
    function checkNickname(str) {
        var nickname=/^([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_]){1,10}$/ /*/^[\u4E00-\u9FA5]{2,5}$/*/;//[\u4E00-\u9FA5] 判断是不是1到10位中文英文数字下划线字符
        return nickname.test(str);//使用test方法，符合Name的规范就的到true，反之的到false
    }

    function check() {
        var username=document.getElementById("username").value;
        var password=document.getElementById("password").value;
        var nickname=document.getElementById("nickname").value;

        if(!checkUsername(username)){//调用函数checkName（）去判断name是否合格 不合格执行以下操作
            alert("用户名格式错误，请重新输入用户名");//提示重新输入
            document.getElementById("username").focus();//获取光标
            return false;//返回false 表单不能成功提交
        }
        if(!checkPassword(password)){//调用函数checkName（）去判断name是否合格 不合格执行以下操作
            alert("密码格式错误，请重新输入密码");//提示重新输入
            document.getElementById("password").focus();//获取光标
            return false;//返回false 表单不能成功提交
        }
        if(!checkNickname(nickname)){//调用函数checkName（）去判断name是否合格 不合格执行以下操作
            alert("昵称格式错误，请重新输入用户名");//提示重新输入
            document.getElementById("nickname").focus();//获取光标
            return false;//返回false 表单不能成功提交
        }
        alert("注册成功");
        return true;
    }

</script>
<body>
<form action="#" method="post" id="frm">
    <h1 style="color: #ffb241" align="center">请注册</h1>
    <table width="450" align="center" style="box-shadow: 0px 2px 12px rgba( 0,0,0,0.1);">
        <tr>
            <td colspan="2" bgcolor="#ffaf64">注册用户</td>
        </tr>
        <tr>
            <td>用户名：</td>
            <td><input style="width: 310px" type="text" name="username" id="username" placeholder="用户名为1到10位可包含中英文数字下划线的字符"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input style="width: 310px" type="password" name="password" id="password" placeholder="密码为6-30位字母或数字"></td>
        </tr>
        <tr>
            <td>昵称：</td>
            <td><input style="width: 310px" type="text" name="nickname" id="nickname" placeholder="昵称为1到10位可包含中英文数字下划线的字符"></td>
        </tr>
        <tr>
            <td><a href="login.html" class="title3" style="text-decoration: none;">返回登录页面</a></td>
            <td>
                <button type="button" id="regist">注册</button>
                <!--<input type="submit" value="注册">-->
            </td>
        </tr>
    </table>
</form>
<script>
    /*注册页面接口*/ /*http://192.168.104.64:8084/regist.html*/
    $(function () {
        $('#regist').click(function () {
            var chack = check();
            if(chack==true){
                var username = $('#username').val();
                var password = $('#password').val();
                var nickname = $('#nickname').val();
                $.ajax({
                    url:'http://192.168.104.64:9003/toRegist',
                    type:'post',
                    data:{username:username,password:password,nickname:nickname},
                    dataType:'json',
                    success:function (result) {
                        console.log(result);
                    }
                })
                window.location.href="login.html";
            }
        })
    })
</script>
</body>

</html>